<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 小帅
  Date: 2021/9/17
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" +
                request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
    <%--<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>--%>
    <script src="${pageContext.request.contextPath}/static/js/pintuer.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <style>
        /*tr:hover{
            background: burlywood;
        }

        td:hover{
            background: burlywood;
        }*/
    </style>

</head>
<body>
<%--${list}--%>

<form method="post" action="${pageContext.request.contextPath}/userServlet?method=delUsers" onsubmit="return DelSelect()">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 留言管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <a class="button border-yellow" href="${pageContext.request.contextPath}/jsp/add.jsp"><span class="icon-plus-square-o"></span> 添加信息</a>
                    <button type="button"  class="button border-green" id="checkall"><span class="icon-check"></span> 全选</button>
                    <button type="submit" class="button border-red"><span class="icon-trash-o"></span> 批量删除</button>
                </li>
                <li style="align-items: flex-end; padding-left: 40%">
                    <input type="text" id = "keywords" placeholder="请输入搜索关键字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
                    <a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th width="120">ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
            </thead>
            <%--<c:forEach items="${list}" var="user">
                <tr>
                    <td><input type="checkbox" name="id[]" value="${user.id}" />
                            ${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.password}</td>
                    <td>${user.myHobby}</td>
                    <td><div class="button-group">
                        <a class="button border-red" href="javascript:void(0)" onclick="return del(${user.id})"><span class="icon-trash-o"></span> 删除</a>
                        <a class="button border-main" href="${pageContext.request.contextPath}/userServlet?method=eidt&userid=${user.id}&username=${user.username}&password=${user.password}&myHobby=${user.myHobby}">
                            <span class="icon-edit"></span>
                            修改
                        </a>
                    </div></td>
                </tr>
            </c:forEach>--%>

            <tbody id="tab"></tbody>
            <tr>
                <td colspan="8" align="center" style="padding-left: 10px">
                    <span id="total" class="x-right" style="line-height:40px"></span>
                    <ul class="pagination" id="pagination1"></ul>
                </td>
            </tr>
        </table>
    </div>
</form>
<script type="text/javascript">
    function del(id){
        if(confirm("您确定要删除该用户吗吗?")){
            window.location.href = "userServlet?method=deletedUser&userid=" + id;
        }
    }

    // toggo:连续单击事件， $("选择器").togle
    $("#checkall").click(function(){
        $("input[name='id[]']").each(function(){
            if (this.checked) {
                this.checked = false;
            }
            else {
                this.checked = true;
            }
        });
    });

    $("#checkall").toggle(
        function () {
            $("input[name='id[]']").each(function(){
                this.checked = true;
            });
        },

        function () {
            $("input[name='id[]']").each(function(){
                this.checked = false;
            });
        }
    );

    function changesearch() {
        var keywords = $("#keywords").val();
        window.location.href = "${pageContext.request.contextPath}/userServlet?method=searchByKeyword&keywords=" + keywords;
        console.log(keywords);
    }
    function DelSelect(){
        var Checkbox=false;
        // 判断用户是否选中了某些用户
        $("input[name='id[]']").each(function(){
            if (this.checked==true) {
                Checkbox=true;
            }
        });

        // 进行判断
        if (Checkbox){
            var t=confirm("您确认要删除选中的内容吗？");
            if (t==false) return false;
        }
        else{
            alert("请选择您要删除的内容!");
            return false;
        }

        // 表单能正确提交
        return true;
    }
</script>
<script>

    //总页数
    var totalPages = 0;
    //总条数
    var totalCounts = 0;
    //当前页
    var currentPage = 0;
    //页面加载完成就去执行此代码，主要目的就是加载按钮，以及当页面中pagaNum发生变化时，去执行后台查询数据方法
    $(document).ready(function () {
        //第一次执行selectAllUser函数，用于初始化参数
        selectAllUser(-1);
        //加载按钮
        $("#pagination1").jqPaginator({
            //总页数
            totalPages:totalPages,
            //总条数
            totalCounts:totalCounts,
            //当前页
            currentPage:currentPage,
            //首页
            first:'<li class="first"><a href="javascript:void(0)">首页</a></li>',
            //上一页
            prev:'<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
            //下一页
            next:'<li class="next"><a href="javascript:void(0)">下一页</a></li>',
            //末页
            last:'<li class="last"><a href="javascript:void(0)">末页</a></li>',
            //当前页
            page:'<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
            // pageNum改变执行页数， 参数其实就是n
            onPageChange : function (num) {
                selectAllUser(num)
            }
        })
    });

    function selectAllUser(n) {
        $.ajax({
            url:"../user/queryAll",
            dataType:"json",
            type:"post",
            //  设置同步请求
            async:false,
            data:{
                "pageNum": n,
                "pageSize": 7
            },success:function (data) {
                console.log(data);
                // 获取用户登录
                var userlist = data.list;
                if(userlist.length > 0){
                    totalPages = data.pages;
                    totalCounts = data.total;
                    currentPage = data.pageNum;

                    $("#total").text("共有数据：" + totalCounts + "条");
                    // 首先定义一个空字符串，接受用户数据
                    var str = '';
                    // 通过for循环拼接用户数据
                    for (var i = 0; i < userlist.length; i++){
                        str = str + "<tr> " +
                            "<td><input type=\"checkbox\" name=\"id[]\" value=\"{{userlist[i].id}}\" />\n" +
                            userlist[i].id + "</td>" +
                            "<td>" + userlist[i].username + "</td>" +
                            "<td>" + userlist[i].password + "</td>" +
                            "<td>" + userlist[i].myHobby+ "</td>" +
                            "<td><div class=\"button-group\">\n" +
                            "                        <a class=\"button border-red\" href=\"javascript:void(0)\" onclick=\"return del(userlist[i].id)\"><span class=\"icon-trash-o\"></span> 删除</a>&nbsp;&nbsp;\n" +
                            "                        <a class=\"button border-main\" href=\"${pageContext.request.contextPath}/jsp/eidt.jsp?method=eidt&userid=${user.id}&username=${user.username}&password=${user.password}&myHobby=${user.myHobby}\">\n" +
                            "                            <span class=\"icon-edit\"></span>\n" +
                            "                            修改\n" +
                            "                        </a>\n" +
                            "                    </div></td>"+
                            "</tr>";
                        $("#tab").html(str)
                    }
                } else {
                    totalPages = data.pages;
                    totalCounts = data.total;
                    currentPage = data.pageNum;
                    $("#tab").html("<tr>\n" +
                        "            <td colspan=\"8\" align=\"center\">\n" +
                        "               没有数据请加载数据\n" +
                        "            </td>\n" +
                        "        </tr>")
                }
            },error:function () {
                alert("服务器错误")
            }
        })
    }

</script>
</body>
</html>
